<template>
  <div>
    <vue-cropper
      ref="cropper"
      :guides="false"
      :src="imageSrc"
      :aspect-ratio="1 / 1"
      :cropBoxData="cropBoxData"
      @cropend="handleCrop"
    />
    <button @click="uploadImage">上传图片</button>
  </div>
</template>
 
<script>
import VueCropper from 'vue-cropper'
 
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageSrc: '',
      cropBoxData: {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    }
  },
  methods: {
    handleCrop(data) {
      // 处理裁剪结果
      this.cropBoxData = data;
    },
    uploadImage() {
      // 获取裁剪后的图片
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 创建FormData并上传
        let formData = new FormData();
        formData.append('image', blob, 'image.jpg');
 
        // 这里使用axios作为请求库，你可以根据实际情况替换为你的请求库
        axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          // 处理上传成功的响应
          console.log(response.data);
        }).catch(error => {
          // 处理上传失败的情况
          console.error(error);
        });
      });
    }
  }
}
</script>